import { Tabs } from 'antd';
import { Link } from 'react-router-dom';
import {useEffect} from "react";
import Banner from "@/components/banner";
import ProductCard from "@/components/product-card";
import cloudBg from "@/assets/images/cloudBg-2x.png"
import './index.less'
import Cookies from "js-cookie";
import {bannerData,productsTitle,products,customerData,helpData} from './data'
const  Home = () => {
const handleLink = (value:any) => {
  let targetUrl = import.meta.env.REACT_APP_API_BASE
   if(!Cookies.get("Token")){
    if (value === '/suggestions') {
      window.location.href = targetUrl + '/login?h_url=/suggestions'
    }else{
      window.open(value)
    }
  }else{
    window.open(value)
  }
 }
 useEffect(() => {
  // console.log('REACT_APP_ENV',import.meta.env.REACT_APP_ENV);
  const isProdIpAdress = import.meta.env.REACT_APP_ENV === 'production'&& location.hostname.includes('10.181.119.50')
  const isSimIpAdress = import.meta.env.REACT_APP_ENV === 'sim'&& location.hostname.includes('10.189.111.130')
  // console.log('isIpAdress',isIpAdress);
  if (isProdIpAdress) {
    window.location.href = 'https://cloud.xxxx.net/home'
  }
  if (isSimIpAdress) {
    window.location.href = 'http://cloud.test.net/home'
  }
}, [])
  return (
    <div className="home-wrapper">
      <Banner data={bannerData} />
      <div className='products-wrapper'>
        <div className='products-title'>{productsTitle.title}</div>
        <div className='products-desc'>{productsTitle.desc}</div>
        <Tabs
          defaultActiveKey="1"
          centered
          items={products.map((item) => {
            return {
              label: <div className="tab-title">
                <img src={item.img} alt="" />
                {item.label}
              </div>,
              key: String(item.key),
              children: <div className='products'>
              {item.children.map((child) =><ProductCard key={child.id} product={child} link={item.link}/>)}
            </div>,
            };
          })}
        />
      </div>
      <div className="customer-wrapper" style={{backgroundImage:`url(${cloudBg})`}}>
        <div className="customer">
          <div className="customer-title">{customerData.bigTitle}</div>
          <div className="customer-desc">
            <h5>{customerData.title}</h5>
            <p>{customerData.desc}</p>
          </div>
          <div className="customer-img">
            {customerData.customer.map((item,index)=> <div key={index}><img src={item.img} alt="" /></div> )}
          </div>
        </div>
      </div>
      <div className="help-wrapper">
        <div className="help-title">
          {helpData.title}
        </div>
        <div className="help-list">
          {helpData.help.map((item,index)=><div className="help" key={index}>
            <img src={item.img} alt="" />
            <div>{item.title}</div>
            {
              item.type==='text'? <p>{item.desc}</p>:
              (item.target? <span className='link'  onClick={() => { handleLink(item.link) }}>{item.desc}</span> :
              <Link to={item.link}>{item.desc}</Link>)
            }
          </div>)}
        </div>
      </div>
    </div>
  );
}

export default Home;
